/*
* @Author: Choisaaaa
* @Date: 2018/5/6  15:22
* 首页模块
*/
import React from "react";
import {Link}from "react-router-dom"

import "./home.scss"
import Footer from "component/footer/footer.jsx"
import PageTitle from  'component/page-title/page-title.jsx';
import MUtil from 'util/mm.jsx'
import Statistic from 'service/statistic-service.jsx'

const _mm  = new MUtil();
const _statistic = new Statistic();

class Home extends  React.Component{
    constructor(props){
        super(props);
        this.state = {
            userCount : "-",        //用户总数
            sellerCount : "_",      //卖家
            commonUserCount : "_",  //普通用户
            productCount: "-",      //商品总数
            productSaleCount : "_", //在售商品
            orderCount : "-"  ,     //订单总数
            orderFinish : "_"       //成交订单
        }
    }
    componentDidMount(){//组件挂载完成后，渲染首页数据
        this.loadCount();
    }
    loadCount(){//加载首页数据
        _statistic.getHomeCount().then(res => {
            this.setState(res);
        }, errMsg => {
            _mm.errorTips(errMsg);
        });
    }
    render(){
        let blankDivCss = {//使用一个空白的div撑开与footer之间的距离
            height : "3px"
        } ;
        return(
            <div id="page-wrapper">
                <PageTitle title="首页"/>
                <div className="row">
                    <div className="col-md-4">
                        {
                            this.state.userCount === "-"
                                ? <div className="color-box brown"><i className="fa fa-spinner fa-spin"/></div>
                                :(<Link to="/user" className="color-box brown">
                                    <p className="count">{this.state.userCount}</p>
                                    <p className="desc">
                                        <i className="fa fa-user-o"/>
                                        <span>用户总数</span>
                                    </p>
                                </Link>)
                        }

                    </div>
                    <div className="col-md-4">
                        <Link to="/user" className="color-box brown">
                            <p className="count">{this.state.sellerCount}</p>
                            <p className="desc">
                                <i className="fa fa-user-circle-o"/>
                                <span>店家用户</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/product" className="color-box green">
                            <p className="count">{this.state.productCount}</p>
                            <p className="desc">
                                <i className="fa fa-list"/>
                                <span>商品总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/product" className="color-box green">
                            <p className="count">{this.state.productSaleCount}</p>
                            <p className="desc">
                                <i className="fa fa-list"/>
                                <span>在售商品</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/order" className="color-box blue">
                            <p className="count">{this.state.orderCount}</p>
                            <p className="desc">
                                <i className="fa fa-check-square-o"/>
                                <span>订单总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/order" className="color-box red">
                            <p className="count">{this.state.orderFinish}</p>
                            <p className="desc">
                                <i className="fa fa-check-square-o"/>
                                <span>交易成功订单总数</span>
                            </p>
                        </Link>
                    </div>
                </div>

                <div className="row" style={blankDivCss}>

                </div>
                <Footer/>
            </div>
        )
    }

}

export default Home;